import React, {useRef} from 'react';
import {Button, Card, Flex, Space, Table, Input, Dropdown} from "antd";
import { PlusOutlined,SyncOutlined ,DownOutlined,BarChartOutlined,EditOutlined} from '@ant-design/icons';
import LogFactory from 'log/LogFactory';
import {Consume} from "type/Consume";
import consumeColumns from "columns/ConsumeColumns";
import {useAppDispatch, useAppSelector} from "../../../redux/hook";
import {fetchConsumePageData} from "../../../redux/reducer/async/consumeAsyncAction";
import {Link, Outlet, useNavigate} from "react-router-dom";

import "./ConsumeComponent.css" ;
import {MATHEMATICAL_PRECISION} from "constant/Common";
import SelectMonth from "common/select/SelectMonth";
import {ReduxStatus} from "../../../enum/ReduxStatus";
const { Search } = Input;
const log = LogFactory.getLog("ConsumeComponent");
const ConsumeComponent = () => {

    const currentMonth = useRef<number>(new Date().getMonth() + 1) ;
    const state = useAppSelector(state => state.consume) ;
    const dispatch = useAppDispatch() ;
    const navigate = useNavigate() ;
    log.debug("消费记录组件渲染: " ,state.status) ;
    if (state.status === ReduxStatus.INIT){
        dispatch(fetchConsumePageData({current: state.current, pageSize: state.pageSize,month: currentMonth.current})) ;
    }
    if (state.status === ReduxStatus.SUCCESS){
        // log.debug("消费记录数据加载成功");
    }
    if (state.status === ReduxStatus.REFRESH){
        // log.debug("消费记录数据需要刷新");
        setTimeout( () => dispatch(fetchConsumePageData({current: state.current, pageSize: state.pageSize,month: currentMonth.current})),50) ;
    }

    const monthSelect = (value: number) => {
        log.debug("选择月份: " , value);
        currentMonth.current = value ;
        dispatch(fetchConsumePageData({current: 1, pageSize: state.pageSize,month: value})) ;
    } ;

    const onchange = async (page: number, pageSize: number) => {
        // log.debug("分页数据发生变化: ", page, pageSize);
        dispatch(fetchConsumePageData({current: page, pageSize: pageSize,month: currentMonth.current})) ;
    } ;

    const refresh = () => {
       log.debug("刷新消费记录数据(页面)");
       dispatch(fetchConsumePageData({current: state.current, pageSize: state.pageSize,month: currentMonth.current})) ;
    } ;

    // TODO: 根据当前月份,显示本月消费总额度
    // TODO: 查找消费记录,根据月份查找,只显示本月的消费记录

    const toolbar = (
        <Flex className={"table-toolbar-container"} justify={"space-between"}>
            <Flex>
                    <SelectMonth changeMonth={monthSelect} defaultMonth={currentMonth.current}/>
            </Flex>
            <Flex>
                <Space>
                    <Search placeholder="请输如搜索内容" style={{ width: 200 }} enterButton />
                    <Dropdown.Button
                        icon={<DownOutlined />}
                        menu={{
                            items: [
                                {
                                    key: "statistics-chart-menu",
                                    label: <Link key={"statistics-chart"} to={"chart"}>统计图表</Link>,
                                    icon: <BarChartOutlined />
                                },
                                {
                                    key: "edit-consume-item-menu",
                                    label: <Link key={"edit-consume-item"} to={"item"}>编辑报销项</Link> ,
                                    icon: <EditOutlined />
                                }
                            ],
                            onClick: ({key}) => {
                                log.debug("选择的操作: " , key);
                            }
                        }}
                    >
                        操作
                    </Dropdown.Button>
                    <Button type="default" onClick={refresh} icon={<SyncOutlined spin={false} />}>刷新</Button>
                    <Button type="primary">
                        <Link to={"add"}><PlusOutlined /> 新建数据</Link>
                    </Button>
                </Space>
            </Flex>
        </Flex>
    ) ;

    return (
        <Card
            title={"消费记录"}
            extra={<a href="#">More</a>}
        >
            <Outlet/>
            <Table<Consume>
                title={() => toolbar}
                loading={state.loading}
                dataSource={state.data}
                columns={consumeColumns}
                pagination={{
                    onChange: onchange ,
                    current: state.current,
                    pageSize: state.pageSize,
                    total: state.total,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: (total) => `共 ${total} 条数据`,
                }}
                summary={() => (
                    <Table.Summary fixed={"top"}>
                        <Table.Summary.Row>
                            <Table.Summary.Cell className={"gvp-table-summary"} index={0} colSpan={9}>
                                <Space>
                                    <Space.Compact>
                                        <Input className={"table-summary-input table-summary-input-left"} readOnly value={"本月消费"}/>
                                        <Input className={"table-summary-input table-summary-input-right"} readOnly value={state.totalMoney / MATHEMATICAL_PRECISION}/>
                                    </Space.Compact>

                                </Space>
                            </Table.Summary.Cell>
                        </Table.Summary.Row>
                    </Table.Summary>
                )}
            />
            {/*<BarChart>*/}
            {/*    <CartesianGrid strokeDasharray={"3 3"}/>*/}
            {/*    */}
            {/*</BarChart>*/}
        </Card>
    );
};

export default ConsumeComponent;